<template>
  <div class="policy-statistics">
    <!-- 核心统计数据 -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 text-center">
        {{ ts('政策数据库核心统计') }}
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="stat-item text-center">
          <div class="stat-icon mb-4">
            <FileText class="w-12 h-12 text-electric-500 mx-auto" />
          </div>
          <AnimatedCounter 
            :endValue="15847"
            :duration="2000"
            class="text-4xl font-bold text-electric-500 mb-2"
          />
          <h3 class="text-white font-semibold">{{ ts('政策总数') }}</h3>
          <p class="text-white/70 text-sm">{{ ts('涵盖全球各类政策文件') }}</p>
        </div>
        
        <div class="stat-item text-center">
          <div class="stat-icon mb-4">
            <Globe class="w-12 h-12 text-green-500 mx-auto" />
          </div>
          <AnimatedCounter 
            :endValue="195"
            :duration="2000"
            class="text-4xl font-bold text-green-500 mb-2"
          />
          <h3 class="text-white font-semibold">{{ ts('覆盖国家') }}</h3>
          <p class="text-white/70 text-sm">{{ ts('全球主要经济体政策') }}</p>
        </div>
        
        <div class="stat-item text-center">
          <div class="stat-icon mb-4">
            <Building class="w-12 h-12 text-yellow-500 mx-auto" />
          </div>
          <AnimatedCounter 
            :endValue="58"
            :duration="2000"
            class="text-4xl font-bold text-yellow-500 mb-2"
          />
          <h3 class="text-white font-semibold">{{ ts('覆盖行业') }}</h3>
          <p class="text-white/70 text-sm">{{ ts('各行业政策全覆盖') }}</p>
        </div>
        
        <div class="stat-item text-center">
          <div class="stat-icon mb-4">
            <Users class="w-12 h-12 text-purple-500 mx-auto" />
          </div>
          <AnimatedCounter 
            :endValue="328000"
            :duration="2000"
            class="text-4xl font-bold text-purple-500 mb-2"
          />
          <h3 class="text-white font-semibold">{{ ts('服务用户') }}</h3>
          <p class="text-white/70 text-sm">{{ ts('累计服务企业和个人') }}</p>
        </div>
      </div>
    </div>

    <!-- 政策分类统计 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
      <div class="glass-card p-6">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <PieChart class="w-6 h-6 mr-3 text-electric-500" />
          {{ ts('政策类型分布') }}
        </h3>
        <div class="space-y-4">
          <div v-for="(category, index) in policyCategories" :key="index" class="policy-category">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center">
                <div 
                  class="w-4 h-4 rounded-full mr-3"
                  :style="{ backgroundColor: category.color }"
                ></div>
                <span class="text-white">{{ category.name }}</span>
              </div>
              <span class="text-white font-semibold">{{ category.count }}</span>
            </div>
            <div class="w-full bg-gray-600 rounded-full h-2">
              <div 
                class="h-2 rounded-full transition-all duration-1000"
                :style="{ 
                  width: category.percentage + '%',
                  backgroundColor: category.color 
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="glass-card p-6">
        <h3 class="text-xl font-bold text-white mb-4 flex items-center">
          <TrendingUp class="w-6 h-6 mr-3 text-electric-500" />
          {{ ts('政策发布趋势') }}
        </h3>
        <div class="space-y-4">
          <div v-for="(trend, index) in policyTrends" :key="index" class="trend-item">
            <div class="flex items-center justify-between mb-2">
              <span class="text-white">{{ trend.year }}</span>
              <span class="text-white font-semibold">{{ trend.count }}</span>
            </div>
            <div class="w-full bg-gray-600 rounded-full h-2">
              <div 
                class="h-2 rounded-full transition-all duration-1000 bg-gradient-to-r from-electric-500 to-green-500"
                :style="{ width: trend.percentage + '%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 重点国家政策统计 -->
    <div class="glass-card p-6 mb-8">
      <h3 class="text-xl font-bold text-white mb-6 flex items-center">
        <MapPin class="w-6 h-6 mr-3 text-electric-500" />
        {{ ts('重点国家政策统计') }}
      </h3>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="border-b border-white/20">
              <th class="text-left text-white font-semibold py-3">{{ ts('国家/地区') }}</th>
              <th class="text-left text-white font-semibold py-3">{{ ts('政策数量') }}</th>
              <th class="text-left text-white font-semibold py-3">{{ ts('更新频率') }}</th>
              <th class="text-left text-white font-semibold py-3">{{ ts('重点行业') }}</th>
              <th class="text-left text-white font-semibold py-3">{{ ts('活跃度') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="country in keyCountries" :key="country.name" class="border-b border-white/10 hover:bg-white/5">
              <td class="py-4">
                <div class="flex items-center">
                  <span class="text-2xl mr-3">{{ country.flag }}</span>
                  <span class="text-white font-medium">{{ country.name }}</span>
                </div>
              </td>
              <td class="py-4 text-white">{{ country.policyCount }}</td>
              <td class="py-4">
                <span class="px-2 py-1 bg-electric-500/20 text-electric-300 rounded text-xs">
                  {{ country.updateFrequency }}
                </span>
              </td>
              <td class="py-4">
                <div class="flex flex-wrap gap-1">
                  <span
                    v-for="industry in country.keyIndustries"
                    :key="industry"
                    class="px-2 py-1 bg-white/10 text-white rounded text-xs"
                  >
                    {{ industry }}
                  </span>
                </div>
              </td>
              <td class="py-4">
                <div class="flex items-center">
                  <div class="w-16 bg-gray-600 rounded-full h-2 mr-2">
                    <div 
                      class="h-2 rounded-full"
                      :style="{ 
                        width: country.activity + '%',
                        backgroundColor: country.activity > 80 ? '#10b981' : country.activity > 60 ? '#f59e0b' : '#ef4444'
                      }"
                    ></div>
                  </div>
                  <span class="text-white text-sm">{{ country.activity }}%</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 行业政策热力图 -->
    <div class="glass-card p-6 mb-8">
      <h3 class="text-xl font-bold text-white mb-6 flex items-center">
        <BarChart3 class="w-6 h-6 mr-3 text-electric-500" />
        {{ ts('行业政策热力图') }}
      </h3>
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <div 
          v-for="industry in industries" 
          :key="industry.name"
          class="industry-card p-4 rounded-lg text-center cursor-pointer transition-all duration-300 hover:scale-105"
          :style="{ backgroundColor: `rgba(${industry.color}, 0.1)` }"
        >
          <div class="text-2xl mb-2">{{ industry.icon }}</div>
          <h4 class="text-white font-semibold text-sm mb-1">{{ industry.name }}</h4>
          <div class="text-lg font-bold mb-1" :style="{ color: `rgb(${industry.color})` }">
            {{ industry.count }}
          </div>
          <div class="text-xs text-white/60">{{ ts('项政策') }}</div>
        </div>
      </div>
    </div>

    <!-- 实时更新状态 -->
    <div class="glass-card p-6">
      <h3 class="text-xl font-bold text-white mb-4 flex items-center">
        <Activity class="w-6 h-6 mr-3 text-electric-500" />
        {{ ts('实时更新状态') }}
      </h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="update-status">
          <div class="flex items-center mb-2">
            <div class="w-3 h-3 bg-green-500 rounded-full mr-2 animate-pulse"></div>
            <span class="text-white font-semibold">{{ ts('政策监控') }}</span>
          </div>
          <p class="text-white/80 text-sm">{{ ts('7x24小时实时监控全球政策动态') }}</p>
        </div>
        
        <div class="update-status">
          <div class="flex items-center mb-2">
            <div class="w-3 h-3 bg-blue-500 rounded-full mr-2 animate-pulse"></div>
            <span class="text-white font-semibold">{{ ts('数据更新') }}</span>
          </div>
          <p class="text-white/80 text-sm">{{ ts('每日更新政策数据库，确保信息准确') }}</p>
        </div>
        
        <div class="update-status">
          <div class="flex items-center mb-2">
            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div>
            <span class="text-white font-semibold">{{ ts('智能分析') }}</span>
          </div>
          <p class="text-white/80 text-sm">{{ ts('AI智能分析政策影响，提供精准建议') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useTranslation } from '../composables/useTranslation.js'
import AnimatedCounter from './AnimatedCounter.vue'
import {
  FileText,
  Globe,
  Building,
  Users,
  PieChart,
  TrendingUp,
  MapPin,
  BarChart3,
  Activity
} from 'lucide-vue-next'

export default {
  name: 'PolicyStatistics',
  components: {
    AnimatedCounter,
    FileText,
    Globe,
    Building,
    Users,
    PieChart,
    TrendingUp,
    MapPin,
    BarChart3,
    Activity
  },
  
  setup() {
    const { ts } = useTranslation()
    
    // 政策分类数据
    const policyCategories = ref([
      { name: ts('贸易政策'), count: 3251, percentage: 20.5, color: '#3b82f6' },
      { name: ts('税收政策'), count: 2845, percentage: 18.0, color: '#10b981' },
      { name: ts('投资政策'), count: 2456, percentage: 15.5, color: '#f59e0b' },
      { name: ts('产业政策'), count: 2178, percentage: 13.8, color: '#ef4444' },
      { name: ts('金融政策'), count: 1923, percentage: 12.1, color: '#8b5cf6' },
      { name: ts('环保政策'), count: 1687, percentage: 10.6, color: '#06b6d4' },
      { name: ts('人才政策'), count: 1507, percentage: 9.5, color: '#f97316' }
    ])
    
    // 政策发布趋势
    const policyTrends = ref([
      { year: '2024', count: 2847, percentage: 100 },
      { year: '2023', count: 2456, percentage: 86 },
      { year: '2022', count: 2234, percentage: 78 },
      { year: '2021', count: 2015, percentage: 71 },
      { year: '2020', count: 1876, percentage: 66 }
    ])
    
    // 重点国家数据
    const keyCountries = ref([
      {
        name: ts('中国'),
        flag: '🇨🇳',
        policyCount: 4856,
        updateFrequency: ts('每日更新'),
        keyIndustries: [ts('制造业'), ts('科技'), ts('金融')],
        activity: 95
      },
      {
        name: ts('美国'),
        flag: '🇺🇸',
        policyCount: 3247,
        updateFrequency: ts('每日更新'),
        keyIndustries: [ts('科技'), ts('医疗'), ts('能源')],
        activity: 92
      },
      {
        name: ts('欧盟'),
        flag: '🇪🇺',
        policyCount: 2856,
        updateFrequency: ts('每日更新'),
        keyIndustries: [ts('环保'), ts('数字化'), ts('贸易')],
        activity: 88
      },
      {
        name: ts('日本'),
        flag: '🇯🇵',
        policyCount: 1987,
        updateFrequency: ts('每周更新'),
        keyIndustries: [ts('制造业'), ts('科技'), ts('老龄化')],
        activity: 85
      },
      {
        name: ts('英国'),
        flag: '🇬🇧',
        policyCount: 1654,
        updateFrequency: ts('每周更新'),
        keyIndustries: [ts('金融'), ts('科技'), ts('创新')],
        activity: 82
      },
      {
        name: ts('巴西'),
        flag: '🇧🇷',
        policyCount: 1234,
        updateFrequency: ts('每周更新'),
        keyIndustries: [ts('农业'), ts('矿业'), ts('制造业')],
        activity: 78
      }
    ])
    
    // 行业分类数据
    const industries = ref([
      { name: ts('制造业'), icon: '🏭', count: 1856, color: '59, 130, 246' },
      { name: ts('科技'), icon: '💻', count: 1645, color: '16, 185, 129' },
      { name: ts('金融'), icon: '💰', count: 1423, color: '245, 158, 11' },
      { name: ts('医疗'), icon: '🏥', count: 1234, color: '239, 68, 68' },
      { name: ts('能源'), icon: '⚡', count: 1087, color: '139, 92, 246' },
      { name: ts('农业'), icon: '🌱', count: 965, color: '6, 182, 212' },
      { name: ts('交通'), icon: '🚗', count: 876, color: '249, 115, 22' },
      { name: ts('环保'), icon: '🌍', count: 754, color: '34, 197, 94' },
      { name: ts('教育'), icon: '📚', count: 687, color: '168, 85, 247' },
      { name: ts('建筑'), icon: '🏗️', count: 623, color: '14, 165, 233' },
      { name: ts('旅游'), icon: '✈️', count: 534, color: '234, 88, 12' },
      { name: ts('文化'), icon: '🎭', count: 465, color: '217, 70, 239' }
    ])
    
    return {
      ts,
      policyCategories,
      policyTrends,
      keyCountries,
      industries
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

.stat-item {
  position: relative;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.industry-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.industry-card:hover {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.text-electric-500 {
  color: #60a5fa;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style> 